<template>
  <el-pagination class="custom-pagination-padding" 
  background :small="isSmall" v-if="total > 0" 
  @size-change="handleSizeChange" @current-change="handleCurrentChange" 
  :current-page="pageData.pageNum" :page-size="pageData.pageSize"
   layout="total, prev, pager, next, jumper" :total="total" />
</template>
<script  setup name="pagination">


onMounted(() => {
  window.addEventListener("resize", setPaginationStyle);
  const clientWidth = document.documentElement.clientWidth;
  isSmallHandle(clientWidth)
});
onUnmounted(() => {
  window.removeEventListener("resize", setPaginationStyle);
});
const props = defineProps({
  // 当前页
  pageNum: {
    type: [Number],
    default: 1,
  },
  // 配置每页显示多少条
  pageSizes: {
    type: Array,
    default: function () {
      return [10, 20, 30, 50, 100];
    },
  },
  // 默认每页显示条数
  pageSize: {
    type: [Number],
    default: 10,
  },
  // 数据总条数
  total: {
    type: [Number],
    default: 0,
  },
});
const emit = defineEmits(["changePage"]);
const pageData = reactive({
  pageSize: props.pageSize,
  pageNum: props.pageNum,
});
// 改变当前页
function handleCurrentChange(val) {
  pageData.pageNum = val;
  emit("changePage", pageData);
}
// 改变每页显示多少条
function handleSizeChange(val) {
  pageData.pageNum = 1;
  pageData.pageSize = val;
  emit("changePage", pageData);
}
const isSmall = ref(false);
// 监听窗口设置分页器
function setPaginationStyle() {
  const clientWidth = document.documentElement.clientWidth;
  isSmallHandle(clientWidth)
}
function isSmallHandle(clientWidth){
  if (clientWidth > 768) {
    isSmall.value = false;
  } else {
    isSmall.value = true;
  }
}
watchEffect(() => {
  pageData.pageSize = props.pageSize;
  pageData.pageNum = props.pageNum;
});
</script>


<style scoped lang="scss">
.custom-pagination-padding {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px) {
}

@media screen and (min-width: 768px) {
}
</style>